<template>
  <DraggableModal v-model:visible="handleModalVisible" :width="700" title="告警处理">
    <a-form
      :model="state.handleData"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      :rules="rules"
      ref="handleFormRef"
    >
      <a-form-item label="处理人" name="handlePerson">
        <a-input
          v-model:value="state.handleData.handlePerson"
          placeholder="请输入处理人"
        ></a-input>
      </a-form-item>
      <a-form-item label="处理详情" name="handleDetail">
        <a-textarea
          v-model:value="state.handleData.handleDetail"
          :autoSize="{ minRows: 4 }"
          placeholder="请输入处理详情"
        ></a-textarea>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="handleWarnBtnCancel">取消</a-button>
      <a-button type="primary" @click="handleWarnBtnClick">保存</a-button>
    </template>
  </DraggableModal>
</template>
<script lang="tsx">
import { defineComponent, ref, reactive, watch, onMounted } from 'vue';
import { DraggableModal, useModal } from '@/framework/components/core/draggable-modal';
import { FormInstance, message } from 'ant-design-vue';
import { handleWarn } from '../api/handle_warn';
export default defineComponent({
  name: 'HandleWarnModal',
  components: {
    DraggableModal,
  },
  emit: ['update:visible'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => ({}),
    },
    refreshTable: {
      type: Function,
    },
    type: {
      type: String,
      required: true,
    },
  },
  setup(props, { emit }) {
    const handleModalVisible = ref(props.visible);
    watch(
      () => props.visible,
      (nval) => {
        handleModalVisible.value = nval;
        handleFormRef.value?.resetFields();
      },
    );
    watch(
      () => props.row,
      (nval) => {
        state.handleData = nval;
      },
    );
    watch(handleModalVisible, (nval) => {
      emit('update:visible', nval);
    });
    const state = reactive({
      handleData: props.row,
    });
    const rules = {
      handlePerson: [{ required: true, message: '请输入处理人' }],
      handleDetail: [{ required: true, message: '请输入处理详情' }],
    };
    const handleFormRef = ref<FormInstance>();
    const handleWarnBtnClick = async () => {
      try {
        await handleFormRef.value?.validate();
        let data = {
          warnId: state.handleData.id,
          handleDetail: state.handleData.handleDetail,
          handlePerson: state.handleData.handlePerson,
          warnType: props.type,
        };
        const res = await handleWarn(data);
        if (res.success) {
          message.success('处理成功');
          handleModalVisible.value = false;
          props.refreshTable && props.refreshTable();
        } else {
          message.error(res.data || '处理失败');
        }
      } catch (error) {
        message.error('请输入必填项');
      }
    };
    const handleWarnBtnCancel = () => {
      handleModalVisible.value = false;
    };
    return {
      handleModalVisible,
      state,
      rules,
      handleFormRef,
      handleWarnBtnClick,
      handleWarnBtnCancel,
    };
  },
});
</script>
<style lang="less" scoped></style>
